<template>
  <v-chart :ref="refs"
           :theme="tdTheme"
           @click="onClick"
           :autoresize="true"
           :options="polar" />
</template>

<script>
import 'echarts'
import ECharts from 'vue-echarts'
import tdTheme from './theme.json'
export default {
  name: 'Echart',
  components: {
    'v-chart': ECharts
  },
  props: {
    option: {
      type: Object,
      default () {
        return {}
      }
    },
    refs: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      tdTheme: tdTheme,
      polar: {}
    }
  },
  methods: {
    init () {
      this.polar = { ...this.option }
    },
    onClick (event, instance, echarts) {
      this.$emit('chartClick', arguments)
      console.log(event, instance, echarts)
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.init()
    })
  }
}
</script>
